<template>
	<div class="publicpageview">
		<div class="publicformview">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
				<el-row :gutter="20">
					<el-col :span="4">
						<el-form-item label="管理单位：" prop="districtId">
							<el-select v-model="listQuery.districtId" clearable @change="handleQuchange">
								<el-option v-for="item in areaList" :label="item.dname" :value="item.did" :key="item.did"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="管理部：" prop="houseAdminId">
							<el-select v-model="listQuery.houseAdminId" clearable>
								<el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
									:key="item.aid"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="所号：" prop="blockId">
							<el-input v-model="listQuery.blockId"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="所地址：" prop="blockAddress">
							<el-input v-model="listQuery.blockAddress"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="计划年份：" prop="projectYear">
							<el-date-picker v-model="listQuery.projectYear" type="year" placeholder="选择年">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="维修项目" prop="repairProject">
							<el-input v-model="listQuery.repairProject"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="4">
						<el-form-item label="是否上报：" prop="isPlanSubmission">
							<el-select v-model="listQuery.isPlanSubmission" clearable>
								<el-option label="否" :value="0" key="1"></el-option>
								<el-option label="是" :value="1" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="4">
						<div style="padding-left: 90px;">
							<el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
							<el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleAddUser('add')">计划录入</el-button>
			<el-button type="primary" size="mini" @click="handleBatchImport">批量计划录入</el-button>
			<!-- <el-button type="primary" size="mini" @click="handleReportDialogOpen">计划上报</el-button> -->
			<el-table :data="list" border fit highlight-current-row size="mini">
				<el-table-column align="center" label="区房屋管理单位" prop="districtName">
				</el-table-column>
				<el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
				</el-table-column>
				<el-table-column align="center" label="所号" prop="blockId">
				</el-table-column>
				<el-table-column align="center" label="所地址" prop="blockAddress">
				</el-table-column>

				<el-table-column align="center" label="工程年份" prop="projectYear">
					<template slot-scope="scope">
						{{getTime(scope.row.projectYear)}}
					</template>
				</el-table-column>

				<el-table-column align="center" label="房屋性质" prop="propertyType">
				</el-table-column>

				<el-table-column align="center" label="工程类别" prop="engineeringCategory">
				</el-table-column>

				<el-table-column align="center" label="修缮项目" prop="repairProject">
				</el-table-column>


				<el-table-column align="center" label="操作" width="180" fixed="right">
					<template slot-scope="scope">
						<el-button type="text" v-if="scope.row.isPlanSubmission == 1" size="mini"
							@click="handleReportCallback(scope.row.id)">计划退回</el-button>
						<el-button type="text" v-else size="mini" @click="handleReportPass(scope.row.id)">计划上报</el-button>
						<el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
						<el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>
						<el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<el-dialog :title="isAdd == 'add' ? '年修缮计划录入' : isAdd == 'update' ? '年修缮计划修改' : '年修缮计划详情'"
			:visible.sync="dialogVisible" width="60%" :before-close="handleClose">
			<el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px"
				size="mini">

				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="区房屋管理单位：" prop="districtId">
							<el-select v-model="formData.districtId" @change="handleFormQuchange">
								<el-option v-for="item in areaList" :label="item.dname" :value="item.did" :key="item.did"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="管理部(分中心)：" prop="houseAdminId">
							<el-select v-model="formData.houseAdminId" @change="handleHouseChange">
								<el-option v-for="item in houseFormAdminList" :label="item.aname" :value="item.aid"
									:key="item.aid"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="管片：" prop="blockGroupId">
							<el-select v-model="formData.blockGroupId" @change="handleGuanpianChange">
								<el-option v-for="item in guanpianList" :label="item.groupnew" :value="item.groupnew"
									:key="item.groupnumber"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="所号：" prop="blockId">
							<el-select v-model="formData.blockId" @change="handleSuoChange">
								<el-option v-for="item in suoList" :label="item.creatingdeptno" :value="item.blockid"
									:key="item.blockid"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="所地址：" prop="blockAddress">
							<el-input v-model="formData.blockAddress"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="房屋性质：" prop="propertyType">
							<el-select v-model="formData.propertyType">
								<el-option label="启用" value="1" key="1"></el-option>
								<el-option label="禁用" value="0" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="工程类别：" prop="engineeringCategory">
							<el-select v-model="formData.engineeringCategory">
								<el-option label="启用" value="1" key="1"></el-option>
								<el-option label="禁用" value="0" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="8">
						<el-form-item label="修缮项目：" prop="repairProject">
							<el-select v-model="formData.repairProject">
								<el-option label="启用" value="1" key="1"></el-option>
								<el-option label="禁用" value="0" key="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>


					<el-col :span="8">
						<el-form-item label="工程年份：" prop="projectYear">
							<el-date-picker v-model="formData.projectYear" type="year" placeholder="年">
							</el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="工作量(间)：" prop="workloadRoom">
							<el-input v-model="formData.workloadRoom"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工作量(面积)：" prop="workloadArea">
							<el-input v-model="formData.workloadArea"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="工作量(万元)：" prop="workloadWan">
							<el-input v-model="formData.workloadWan"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="开工时间：" prop="commencementTime">
							<el-date-picker v-model="formData.commencementTime" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="竣工时间：" prop="completionTime">
							<el-date-picker v-model="formData.completionTime" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item label="备注：" prop="note">
							<el-input v-model="formData.note"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false" size="medium" v-if="isAdd == 'details'">返
					回</el-button>

				<el-button type="primary" @click="handleSubmitClick" size="medium" v-else>保 存</el-button>
			</span>
		</el-dialog>


		<!-- 批量导入弹窗 -->
		<el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="680px" @close="handleUploadDialogClose">
			<div class="upload-container">
				<el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
					:on-success="handleUploadSuccess" :on-error="handleUploadError" :limit="1" :on-remove="handleFileRemove"
					:before-upload="beforeUpload" :auto-upload="true" ref="upload">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						请将文件拖动到此处，或<em style="color: #008C93;">点击上传</em>
					</div>
				</el-upload>
			</div>

			<div slot="footer" class="dialog-footer">

				<el-button type="primary" size="mini" @click="handleImport" :loading="importLoading">保 存</el-button>
			</div>
		</el-dialog>


		<el-dialog title="年修缮计划上报" :visible.sync="reportVisible" width="60%" @close="handleReportDialogClose">
			<div class="report-top">
				<span>计划年份：</span>
				<el-date-picker v-model="reportYear" type="year" placeholder="选择年" size="mini">
				</el-date-picker>
				<el-button type="primary" size="mini" @click="handleSearchReportData">查 询</el-button>
			</div>

			<div class="report-table">
				<el-table :data="reportTableData" border fit highlight-current-row size="mini"
					@selection-change="handleSelectionChange">

					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column align="center" label="区房屋管理单位" prop="id">
					</el-table-column>
					<el-table-column align="center" label="管理部(分中心)" prop="id">
					</el-table-column>
					<el-table-column align="center" label="所号" prop="id">
					</el-table-column>
					<el-table-column align="center" label="所地址" prop="name">
					</el-table-column>

					<el-table-column align="center" label="工程年份" prop="name">
					</el-table-column>

					<el-table-column align="center" label="房屋性质" prop="name">
					</el-table-column>

					<el-table-column align="center" label="工程类别" prop="name">
					</el-table-column>

					<el-table-column align="center" label="修缮项目" prop="name">
					</el-table-column>
				</el-table>
			</div>

			<div slot="footer" class="dialog-footer">

				<el-button type="primary" size="mini" @click="handleReportPass">计划上报</el-button>
			</div>

		</el-dialog>
	</div>
</template>

<script>
	import {
		listAll,
		createPlanYear,
		updatePlanYear,
		deletePlanYear,
		backPlanYear,
		reportPlanYear
	} from '@/api/repair'
	import {
		getArea,
		getHouseAdmin,
		getBlockGroup,
		getBlockByGroup,
		upload
	} from '@/api/common'
	import {
		Message
	} from 'element-ui'
	import moment from 'moment';
	export default {
		name: "AccommodationManagementIndex",

		data() {
			return {
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					districtId: "",
					houseAdminId: "",
					blockId: "",
					blockAddress: "",
					projectYear: "",
					repairProject: "",
					isPlanSubmission: null
				},
				reportYear: null,
				reportTableData: [],
				reportVisible: false,
				total: 0,
				list: [],
				dialogVisible: false,
				isAdd: 'add',
				formData: {
					districtId: null,
					houseAdminId: null,
					blockGroupId: null,
					blockId: null,
					blockAddress: "",
					propertyType: null,
					engineeringCategory: null,
					repairProject: null,
					projectYear: "",
					workloadRoom: "",
					workloadArea: "",
					workloadWan: "",
					commencementTime: "",
					completionTime: "",
					note: ""

				},
				uploadDialogVisible: false,
				fileList: [],
				uploadAction: 'http://125.39.77.18:9021/mall-admin/fileUpload/upload',
				importLoading: false,
				multipleSelection: [],
				areaList: [],
				houseAdminList: [],
				houseFormAdminList: [],
				guanpianList: [],
				suoList: [],
				currentFileSrc: []
			};
		},

		computed: {
			getTime() {
				return (val) => {
					if (val) {
						return moment(val).format("YYYY")
					} else {
						return ""
					}
				}
			}
		},

		mounted() {
			this.getCommon();
			this.getList();
		},

		methods: {
			getCommon() {
				getArea().then(res => {
					this.areaList = res.data
				})
			},

			handleQuchange(val) {
				this.listQuery.houseAdminId = null;
				if (val) {
					this.getHouseAdmin(val);

				} else {
					this.houseAdminList = [];
				}
			},

			handleFormQuchange(val) {
				this.formData.houseAdminId = null;
				this.handleHouseChange();
				if (val) {
					this.getFormHouseAdmin(val);

				} else {
					this.houseFormAdminList = [];
				}
			},

			getHouseAdmin(val) {
				getHouseAdmin({
					DID: val,
					pageNum: 1,
					pageSize: 100000
				}).then(res => {
					this.houseAdminList = res.data.list;
				})
			},
			getFormHouseAdmin(val) {
				getHouseAdmin({
					DID: val,
					pageNum: 1,
					pageSize: 100000
				}).then(res => {
					this.houseFormAdminList = res.data.list;
				})
			},

			handleHouseChange(val) {
				this.formData.blockGroupId = null
				this.handleGuanpianChange();
				if (val) {
					getBlockGroup({
						houseAdminId: val,
						pageNum: 1,
						pageSize: 10000
					}).then(res => {
						this.guanpianList = res.data.list;
					})
				} else {
					this.guanpianList = [];
				}
			},

			handleGuanpianChange(val) {

				this.formData.blockId = null
				this.handleSuoChange();
				if (val) {
					getBlockByGroup({
						group: val,
						pageNum: 1,
						pageSize: 10000
					}).then(res => {
						this.suoList = res.data.list;
					})
				} else {
					this.suoList = [];
				}
			},

			handleSuoChange(val) {
				if (val) {
					this.suoList.forEach(item => {
						if (item.blockid == val) {
							this.formData.blockAddress = item.address;

						}
					})
				} else {
					this.formData.blockAddress = ""
				}
			},

			handleReportCallback(id) {
				this.$confirm(
						"是否回退该计划",
						"提示", {
							confirmButtonText: "保 存",
							cancelButtonText: "取 消",
							type: "warning",
						}
					)
					.then(() => {
						backPlanYear(id).then(res => {
							Message({
								message: res.message || '操作成功',
								type: "success",
								duration: 2 * 1000,
							});
							this.getList();
						})
					})
					.catch(() => {});
			},

			handleReportPass(id) {

				// this.handleReportDialogClose()
				console.log(id)
				this.$confirm(
						"是否上报该计划",
						"提示", {
							confirmButtonText: "保 存",
							cancelButtonText: "取 消",
							type: "warning",
						}
					)
					.then(() => {
						reportPlanYear(id).then(res => {
							Message({
								message: res.message || '操作成功',
								type: "success",
								duration: 2 * 1000,
							});
							this.getList();
						})
					})
					.catch(() => {});
			},

			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleReportDialogClose() {
				this.reportYear = null;
				this.reportTableData = [];
			},
			handleReportDialogOpen() {
				this.reportVisible = true;
			},

			handleSearchReportData() {
				listAll(this.listQuery).then((response) => {
					this.reportTableData = response.data.list;

				});
			},

			// 上传失败
			handleUploadError(err, file) {
				this.$message.error('文件上传失败');
			},

			// 导入数据
			handleImport() {
				if (this.fileList.length === 0) {
					this.$message.warning('请先选择要导入的文件');
					return;
				}

				this.importLoading = true;
				setTimeout(() => {
					this.importLoading = false;
					this.uploadDialogVisible = false;
					this.$message.success('导入成功！');
					this.getList();
				}, 2000);
			},
			// 批量导入
			handleBatchImport() {
				this.uploadDialogVisible = true;
				this.fileList = [];
			},

			// 上传前验证
			beforeUpload(file) {
				const isExcel = file.type === 'application/vnd.ms-excel' ||
					file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
				if (!isExcel) {
					this.$message.error('只能上传 Excel 文件！');
					return false;
				}

				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传文件大小不能超过 2MB!');
					return false;
				}

				return true;
			},
			// 文件选择变化
			handleFileRemove(file, fileList) {
				this.fileList = fileList;
				let arr = [...this.currentFileSrc];
				let i;
				arr.forEach((item, index) => {
					if (item.fileSize == file.size && item.name == file.name) {
						i = index
					}
				})
				arr.splice(i, 1);
				this.currentFileSrc = arr;


			},
			// 上传成功
			handleUploadSuccess(response, file, fileList) {
				this.fileList = fileList
				if (response.code == 200) {
					this.$message.success('文件上传成功');
					this.currentFileSrc.push(response.data)
				} else {
					this.$message.error('文件上传失败');
					let arr = [...fileList.map(i => i)]
					arr.pop();
					this.fileList = arr;

				}
			},
			handleUploadDialogClose() {
				this.fileList = [];
				this.currentFileSrc = [];
				this.$refs.upload.clearFiles();
				this.uploadDialogVisible = false;
			},
			handleSubmitClick() {
				const {
					formData
				} = this;
				if(formData.propertyType=='启用'){
					formData.propertyType = 1
				}else if(formData.propertyType=='禁用'){
					formData.propertyType = '0'
				}
				
				if(formData.engineeringCategory=='启用'){
					formData.engineeringCategory = 1
				}else if(formData.engineeringCategory=='禁用'){
					formData.engineeringCategory = 0
				}
				
				if(formData.repairProject=='启用'){
					formData.repairProject = 1
				}else if(formData.repairProject=='禁用'){
					formData.repairProject = 0
				}
				
				if (this.isAdd == 'add') {
					createPlanYear({
						...formData
					}).then(res => {
						this.handleClose()
						this.getList();
						Message({
							message: res.message || '操作成功',
							type: "success",
							duration: 2 * 1000,
						});
					})
				}
				if (this.isAdd == 'update') {
					updatePlanYear({
						...formData
					}).then(res => {
						this.handleClose()
						this.getList();
						Message({
							message: res.message || '操作成功',
							type: "success",
							duration: 2 * 1000,
						});
					})
				}

			},

			handleSizeChange(val) {
				this.listQuery.pageNum = 1;
				this.listQuery.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val;
				this.getList();
			},

			handleSearch() {
				this.listQuery.pageNum = 1;
				this.getList();
			},
			getList() {
				listAll({
					...this.listQuery,
					projectYear: this.listQuery.projectYear ? moment(this.listQuery.projectYear).format("YYYY") : ""
				}).then((response) => {
					this.list = response.data.list;
					this.total = response.data.total;
				});
			},

			resetForm(val) {

				this.$refs[val].resetFields();
				this.listQuery.pageNum = 1;

				if (val == 'searchForm') {
					this.houseAdminList = [];
				}
			},

			handleAddUser(type) {
				this.isAdd = 'add';
				this.dialogVisible = true;
			},

			handleClose() {
				this.resetForm("dataForm");
				this.dialogVisible = false;
				this.houseFormAdminList = [];
				this.guanpianList = [];
				this.suoList = [];
			},

			async handleUpdate(currentData, type) {
				this.isAdd = type;
				//   一定要在打开弹窗前 再赋值 不然resetFiles没用
				this.dialogVisible = true;
				await this.handleFormQuchange(currentData.districtId)
				await this.handleHouseChange(currentData.houseAdminId)
				await this.handleGuanpianChange(currentData.blockGroupId)
				
				if(currentData.propertyType==1){
					currentData.propertyType = '启用'
				}else{
					currentData.propertyType = '禁用'
				}
				
				if(currentData.engineeringCategory==1){
					currentData.engineeringCategory = '启用'
				}else{
					currentData.engineeringCategory = '禁用'
				}
				
				if(currentData.repairProject==1){
					currentData.repairProject = '启用'
				}else{
					currentData.repairProject = '禁用'
				}
				this.formData = currentData
				this.$forceUpdate()
			},

			handleDelete(id) {
				this.$confirm(
						"此操作将删除该条内容，请确认是否继续操作？",
						"删除提示", {
							confirmButtonText: "保 存",
							cancelButtonText: "取 消",
							type: "warning",
						}
					)
					.then(() => {
						deletePlanYear(id).then(res => {
							Message({
								message: res.message || '操作成功',
								type: "success",
								duration: 2 * 1000,
							});
							this.getList();
						})
					})
					.catch(() => {});
			}
		},
	};
</script>

<style scoped>
	.el-date-editor.el-input {
		width: 100%;
		cursor: pointer;
	}

	/* 上传组件标准样式 */
	.upload-container {
		padding: 20px 0;
		width: 100%;
	}

	.upload-dragger {
		width: 100% !important;
	}

	.upload-dragger .el-upload {
		width: 100% !important;
	}

	.upload-dragger .el-upload-dragger {
		width: 100% !important;
		height: 200px;
		border: 2px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: border-color 0.2s ease;
		background-color: #fafafa;
		box-sizing: border-box;
	}

	.upload-dragger .el-upload-dragger:hover {
		border-color: #409EFF;
		width: 100%;
	}

	.upload-dragger .el-upload-dragger .el-icon-upload {
		font-size: 67px;
		color: #C0C4CC;
		margin: 40px 0 16px;
		line-height: 50px;
		width: 100%;
	}

	.upload-dragger .el-upload__text {
		color: #606266;
		font-size: 14px;
		text-align: center;
	}

	.upload-dragger .el-upload__text em {
		color: #409EFF;
		font-style: normal;
	}

	.template-download {
		margin-top: 15px;
		font-size: 14px;
		color: #606266;
	}

	.template-download .el-button--text {
		color: #409EFF;
		padding: 0;
		font-size: 14px;
	}

	::v-deep .el-upload {
		width: 100% !important;
	}

	::v-deep .el-upload-dragger {
		width: 100% !important;
	}

	/* 附件查看弹窗样式 */
	.attachment-view {
		padding: 20px;
		min-height: 200px;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 24px;
		justify-items: center;
	}

	.attachment-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		width: 100%;
		max-width: 120px;
	}

	.file-icon {
		width: 80px;
		height: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		position: relative;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.file-icon:hover {
		transform: scale(1.05);
	}

	/* 具体文件类型样式 */
	.file-pdf {
		background: #EF4A37;
	}

	.pdf-lines {
		width: 48px;
		height: 36px;
		position: relative;
		margin-bottom: 8px;
	}

	.pdf-lines::before,
	.pdf-lines::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 3px;
		background: white;
		border-radius: 1px;
	}

	.pdf-lines::before {
		top: 8px;
	}

	.pdf-lines::after {
		top: 16px;
	}

	.pdf-lines>span {
		position: absolute;
		top: 24px;
		left: 0;
		right: 0;
		height: 3px;
		background: white;
		border-radius: 1px;
	}

	.file-word {
		background: #2B579A;
	}

	.word-icon {
		font-size: 32px;
		color: white;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.file-excel {
		background: #217346;
	}

	.excel-icon {
		font-size: 32px;
		color: white;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.file-image {
		background: #FF6B35;
	}

	.file-default {
		background: #909399;
	}

	.default-icon {
		font-size: 24px;
		color: white;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.file-text {
		color: white;
		font-size: 12px;
		font-weight: bold;
		font-family: Arial, sans-serif;
	}

	.file-name {
		font-size: 12px;
		color: #606266;
		font-weight: 500;
		text-align: center;
		line-height: 1.4;
		word-break: break-all;
		max-width: 100%;
	}

	/* 表单样式 */
	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #20B2AA;
		margin: 20px 0 15px 0;
		padding-bottom: 8px;
		border-bottom: 2px solid #20B2AA;
	}

	.file-list-item {
		margin: 5px 0;
	}

	.file-list-item .el-button--text {
		color: #409EFF;
		padding: 0;
		font-size: 14px;
	}

	/* 文件预览样式 */
	.file-preview-content {
		padding: 20px;
		text-align: center;
		min-height: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.image-preview {
		text-align: center;
	}

	.file-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.file-icon-large {
		width: 120px;
		height: 120px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		position: relative;
		transition: transform 0.2s;
	}

	.file-icon-large:hover {
		transform: scale(1.05);
	}

	/* 大尺寸文件图标样式 */
	.file-icon-large.file-pdf {
		background: #EF4A37;
	}

	.file-icon-large .pdf-lines {
		width: 72px;
		height: 54px;
		position: relative;
		margin-bottom: 12px;
	}

	.file-icon-large .pdf-lines::before,
	.file-icon-large .pdf-lines::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 4px;
		background: white;
		border-radius: 2px;
	}

	.file-icon-large .pdf-lines::before {
		top: 12px;
	}

	.file-icon-large .pdf-lines::after {
		top: 24px;
	}

	.file-icon-large .pdf-lines>span {
		position: absolute;
		top: 36px;
		left: 0;
		right: 0;
		height: 4px;
		background: white;
		border-radius: 2px;
	}

	.file-icon-large.file-word {
		background: #2B579A;
	}

	.file-icon-large .word-icon {
		font-size: 48px;
		color: white;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.file-icon-large.file-excel {
		background: #217346;
	}

	.file-icon-large .excel-icon {
		font-size: 48px;
		color: white;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.file-icon-large.file-image {
		background: #FF6B35;
	}

	.file-icon-large.file-default {
		background: #909399;
	}

	.file-icon-large .default-icon {
		font-size: 36px;
		color: white;
		font-weight: bold;
		margin-bottom: 12px;
	}

	.file-icon-large .file-text {
		color: white;
		font-size: 16px;
		font-weight: bold;
		font-family: Arial, sans-serif;
	}

	.file-name-large {
		font-size: 16px;
		color: #303133;
		font-weight: 500;
		text-align: center;
		line-height: 1.4;
		word-break: break-all;
		max-width: 400px;
	}

	.file-size {
		font-size: 14px;
		color: #909399;
		font-weight: normal;
	}

	.report-top {
		display: flex;
		align-items: center;

		.el-date-editor.el-input {
			width: 200px;
		}

		span {
			color: #333333;
			margin-right: 10px;
		}

		.el-button {
			margin-left: 10px;
		}
	}

	.report-table {
		margin-top: 20px;

	}
</style>